
<template>
    <el-form ref="form" :model="data" :rules="rules" label-width="100px">
        <el-form-item label="设备名称" prop="name">
            <el-input v-model.trim="data.name" placeholder="请填写设备名称" />
        </el-form-item>
        <el-form-item label="设备编码" prop="code">
            <el-input v-model.trim="data.code" placeholder="请填写设备编码" />
        </el-form-item>
        <el-form-item label="设备分类" prop="cate_id">
            <el-cascader
                v-model="data.cate_id"
                :options="category_list" 
            >
            </el-cascader>
        </el-form-item>
        <el-form-item label="所属项目" prop="project_id">
            <el-select v-model.trim="data.project_id" placeholder="请选择所属项目" clearable  filterable  class="filter-item" >
                <el-option  v-for="(project,index) in projects_list" :key="index" :value="project.id" :label="project.title"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="设备地址" prop="province">
            <el-cascader
            size="large"
            :options="address_options"
            clearable
            filterable
            placeholder="选择地区"
            style="width: 250px; margin-right: 10px"
            v-model="selectedOptions"
            @change="handleAddressChange"
            >
            </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
            <el-input v-model.trim="data.address" placeholder="请填写设备详细地址" />
        </el-form-item>

        <el-form-item label="经纬度">
            <el-col :span="11">
                <el-input  placeholder="经度" v-model="data.longitude" style="width: 100%;"></el-input>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-input placeholder="纬度" v-model="data.latitude" style="width: 100%;"></el-input>
            </el-col>
        </el-form-item>

        <el-form-item label="购买日期" prop="buy_date">
            <el-date-picker
                type="date"
                key="buy_date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
                v-model="data.buy_date"
            ></el-date-picker>
        </el-form-item>

        <el-form-item label="过期日期" prop="expire_date">
            <el-date-picker
                type="date"
                key="expire_date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
                v-model="data.expire_date"
            ></el-date-picker>
        </el-form-item>

        <el-form-item label="绑定日期" prop="bind_time">
            <el-date-picker
                type="datetime"
                 value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择日期"
                v-model="data.bind_time"
            ></el-date-picker>
        </el-form-item>


        <el-form-item label="外设设备" prop="peripheral_devices">
            <el-input v-model.trim="data.peripheral_devices" placeholder="请填写设备外设设备" />
        </el-form-item>

        <el-form-item label="ICCID" prop="iccid">
            <el-input v-model.trim="data.iccid" placeholder="请填写设备外设ICCID" />
        </el-form-item>

        <el-form-item label="排序" prop="sort">
              <el-input-number :min="1"  v-model.trim="data.sort" placeholder="请填写排序" />
        </el-form-item>

        <el-form-item label="是否显示">
            <el-radio-group v-model="data.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
      
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
  </template>
  <script>
  import { create } from '@/api/equipments'
  import { getToken } from '@/utils/auth'
  import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
} from "element-china-area-data";
  
  export default {
    name: 'equipmentCreate',
    components: { },
    
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
      category_list: {
        type: Array,
        default: () => {
          return []
        }
      },
      projects_list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        loading:false,
        dialogVisible:false,
        headerObj: {
              'Authorization': 'Bearer ' + getToken()
          },
        rules: {
              name: [ 
                  { required: true, message: "请输入设备名称", trigger: "blur" },
              ], 
              code: [ 
                  { required: true, message: "请输入设备编码", trigger: "blur" },
              ], 
              cate_id: [ 
                  { required: true, message: "请选择设备分类", trigger: "blur" },
              ], 
              project_id: [ 
                  { required: true, message: "请选择设备所属项目", trigger: "blur" },
              ],

  
        },
        address_options: regionDataPlus,
        selectedOptions: [],
        data: {
              name:'',
              cate_id:'',
              project_id:'',
              sort:0,
              status:1,
              province:"",
              city:"",
              area:"",
              address:"",
              buy_date:'',
              expire_date:"",
              bind_time:"",
              peripheral_devices:"",
              iccid : '',
              longitude:"",
              latitude:"",
        }
      }
    },
    created() {
    },
    methods: {
      
 
        handleAddressChange(value) {
           
            let province = CodeToText[value[0]],
            city = CodeToText[value[1]],
            area = CodeToText[value[2]];
            this.data.province = province != "全部" ? province : "";
            this.data.city = city != "全部" ? city : "";
            this.data.area = area != "全部" ? area : "";
        },
      submit() {
   
        const thiz = this
  
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          create(this.data).then(response => {
            this.$store.commit('settings/SET_AJAX_BUTTON', true);
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 1500,
              onClose() {
                if (thiz.$refs.form !== undefined) {
                  thiz.$refs.form.resetFields()
                }
                thiz.item.dialogVisible = false
              }
            })
          })
        })
      }
    }
  }
  </script>
  
  